<template>
	<view>
		<view class="">
			<view class="pad-lr-32 display-sb view_view pad-tb-40 mar-top-20  bgfff">
				<view class="left_view">
					持卡人姓名
				</view>
				<view class="right_view display-sb align-items">
					<view class="display align-items">
					<input type="text" class="ml10 fontSize-28 " v-model="info.real_name" placeholder-class="" placeholder="请输入持卡人姓名" />
					</view>
				</view>
			</view>
			<view class=" pad-lr-32 display-sb view_view pad-tb-40   bgfff">
				<view class="left_view">
					银行卡号
				</view>
				<view class="right_view display-sb align-items">
					<view class="display align-items">
                    <input type="number" class="ml10 fontSize-28" placeholder-class="" v-model="info.bank_number" placeholder="请输入银行卡号" maxlength="19" />
					</view>
				</view>
			</view>
			<view class="pad-lr-32 display-sb view_view pad-tb-40  bgfff">
				<view class="left_view">
					银行名称
				</view>
				<view class="right_view display-sb align-items">
					<view class="display align-items">
						<input type="text" class="ml10 fontSize-28" placeholder-class="" v-model="info.bank_title" placeholder="请输入银行名称" />
					</view>
				</view>
			</view>
			<view class="pad-lr-32 display-sb view_view pad-tb-40  bgfff">
				<view class="left_view">
					支行名称
				</view>
				<view class="right_view display-sb align-items">
					<view class="display align-items">
						<input type="text" class="ml10 fontSize-28" placeholder-class="" v-model="info.branch_name" placeholder="请输入支行名称（选填）" />
					</view>
				</view>
			</view>
			<view class="pad-lr-32 display-sb view_view pad-tb-40  bgfff">
				<view class="left_view">
					手机号
				</view>
				<view class="right_view display-sb align-items">
					<view class="display align-items">
						<input type="number" maxlength="11" class="ml10 fontSize-28" placeholder-class="" v-model="info.tel" placeholder="请输入预留手机号（选填）" />
					</view>
				</view>
			</view>
            <view class="pad-lr-32 display-sb view_view pad-tb-40  bgfff">
                <view class="left_view">
                    身份证号码
                </view>
                <view class="right_view display-sb align-items">
                    <view class="display align-items">
                        <input type="text" class="ml10 fontSize-28" placeholder-class="" v-model="info.sfz_num" placeholder="请输入身份证号（选填）" />
                    </view>
                </view>
            </view>
			<view class="pad-lr-32 display-sb view_view pad-tb-40  bgfff">
				<view class="left_view">
					设为默认银行卡
				</view>
				<view class="right_view display-row-reverse align-items">
					<switch class="my-switch" :checked="checked" @change="changeswitch" color="#bc8c1e" style="transform:scale(0.7)" />
				</view>
			</view>
		</view>
		<view class="baocun_btn poFi text-align-center col-f fontSize-32 radius-40" @click="bankCardBtn">
			保存银行卡
		</view>
	</view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import {saveBankCard} from '@/utils/api'

interface BankCardInfo {
	id?: string | number;
	real_name: string; // 用户姓名
    bank_number: string; // 银行卡号（后端字段名）
	bank_title: string; // 银行名称
	branch_name?: string; // 支行名称
	tel?: string; // 电话号
	sfz_num?: string; // 身份证
	is_default: number; // 1=是 0=否
}

onLoad((options?: {id?: string, info?: string}) =>{
    if(options?.info){
        // 编辑模式：直接使用列表页传入的数据回填
        try{
            const parsed = JSON.parse(decodeURIComponent(options.info))
            info.value = Object.assign(info.value, parsed)
            checked.value = Number(info.value.is_default) === 1
            uni.setNavigationBarTitle({ title:'编辑银行卡' })
        }catch(e){
            uni.setNavigationBarTitle({ title:'编辑银行卡' })
        }
    } else if(options?.id){
		uni.setNavigationBarTitle({
			title:'编辑银行卡'
		})
		info.value.id = options.id
		id.value = options.id
        // 无详情接口时，不发请求，保留空白或依赖外部传参
	} else {
		uni.setNavigationBarTitle({
			title:'添加银行卡'
		})
	}
})

const info = ref<BankCardInfo>({
    id:'',
    real_name:'',
    bank_number:'',
    bank_title:'',
    branch_name:'',
    tel:'',
    sfz_num:'',
    is_default:0
})

const id = ref<string | number>()//银行卡id-编辑时存在

const checked =ref(false)

const changeswitch =(e: any) =>{
	checked.value = e.detail.value
	if(checked.value){
		info.value.is_default=1
	}else{
		info.value.is_default=0
	}
}

//验证银行卡号（简单验证）
const isValidCardNumber = (cardNumber: string) => {
	if(!cardNumber) return false
	// 银行卡号通常是16-19位数字
	const regex = /^\d{16,19}$/;
	return regex.test(cardNumber);
}

//验证手机号
const isValidPhoneNumber = (phoneNumber: string) => {
	if(!phoneNumber) return true // 手机号为选填，可以为空
	// 中国大陆手机号码正则表达式
	const regex = /^1[3-9]\d{9}$/;
	return regex.test(phoneNumber);
}

const bankCardBtn =() =>{
    if(!info.value.real_name||!info.value.bank_number||!info.value.bank_title){
		uni.showToast({
			title:'请填写完整信息',
			icon:'none'
		})
		return
	}
	
    if(!isValidCardNumber(info.value.bank_number)){
		uni.showToast({
			title:'银行卡号格式不正确',
			icon:'none'
		})
		return
	}
	
    if(info.value.tel && !isValidPhoneNumber(info.value.tel)){
		uni.showToast({
			title:'手机号格式不正确',
			icon:'none'
		})
		return
	}
	
	saveBankCard(info.value).then((res: any)=>{
		uni.showToast({
			title:res.msg || '保存成功',
			icon:res.code==1?'success':'none'
		})
		if(res.code==1){
			uni.$emit('addBankCard')
			setTimeout(()=>{
				uni.navigateBack({delta:1})
			},1500)
		}
	}).catch((err: any) => {
		uni.showToast({
			title:'保存失败',
			icon:'none'
		})
	})
}
</script>

<style lang="scss">
page{
	background-color: #f6f6f6;
}
.view_view{
	border-bottom: 3rpx solid #f6f6f6;
}
.left_view{
	width: 180rpx;
}
.right_view{
	width: 512rpx;
	.you_icon{
		width: 28rpx;
		height: 28rpx;
	}
}
.textare{
	height: 120rpx;
}
.baocun_btn{
	width: 600rpx;
	height: 80rpx;
	line-height: 80rpx;
	background: #C9951C;
	bottom: 100rpx;
	left: calc(50% - 300rpx);
}
</style>

